<style>
    .liuyao_container{
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.7);
        position: fixed;
        top:0;
        left:0;
        z-index: 99;
        display: none;
    }
    .liuyao_wrap{
        width:6.9rem;
        position: absolute;
        top:50%;
        background:url('__PUBLIC__/images/public/liuyao_bg.png') no-repeat;
        background-size:100% 100%;
        left:50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);;
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        background-color:#ffffff;
    }
    .liuyao_closeBtn{
        width:0.6rem;
        height:1rem;
        background:url('__PUBLIC__/images/public/close.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right:0;
        top:-0.6rem;
        z-index: -1;
    }
    .liuyao_title{
        width:100%;
        height:0.8rem;
        line-height: 0.8rem;
        font-family:PingFangSC-Semibold, sans-serif;
        color:#ffffff;
        background:url('__PUBLIC__/images/public/title_01.png') no-repeat;
        background-size:100% 100%;
        text-align: center;
        font-size:0.32rem;
    }
    .liuyao_msg{font-size:0.17rem;padding:0.3rem 0;}
    .liuyao_zt{font-size:0.17rem;color:#e81b34;-webkit-text-size-adjust: none;padding-bottom:0.2rem;text-align: center;}
    .liuyao_pan{
        display: flex;
        display: -webkit-box;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .liuyao_pan ul:first-child{margin-right:0.4rem;}
    .liuyao_pan ul{list-style: none;}
    .liuyao_pan ul li{margin-bottom:0.1rem;}
    .liuyao_pan ul li span{margin-right:0.1rem;}
    .liuyao_pan ul li:nth-last-child(1){margin-bottom:0;}
    .liuyao_pan ul li .liuyao_icon img{width:0.68rem;height:0.1rem;vertical-align: middle;}

    /* 卦辞 */
    .liuyao_gc{
        border:1px solid #945C0C;
        margin:0.32rem 0.2rem 0.2rem;
        position: relative;
        background-image:url('__PUBLIC__/images/public/bagua.png');
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-color:#FFFAE0;
    }
    .liuyao_gc_title{
        width:4.2rem;
        height:0.65rem;
        line-height: 0.65rem;
        text-align: center;
        background:url('__PUBLIC__/images/public/liuyao_title.png') no-repeat;
        background-size:100% 100%;
        position: absolute;
        left:50%;
        font-family:PingFangSC-Semibold, sans-serif;
        margin-left:-2.1rem;
        top:-0.32rem;
        color:#ffffff;
        font-size:0.3rem;
    }
    .liuyao_gc_wrap{
        padding:0.62rem 0.2rem 0.2rem;
    }
    .liuyao_gc_t{
        background: url('__PUBLIC__/images/public/duankuang.png') no-repeat;
        background-size:100% 100%;
        width:4.21rem;
        height:0.51rem;
        line-height: 0.51rem;
        text-align: center;
        font-size:0.24rem;
        color:#e81b34;
        margin:0 auto 0.14rem;
    }
    .liuyao_gc_t2{
        background: url('__PUBLIC__/images/public/duankuang.png') no-repeat;
        background-size:100% 100%;
        width:2.28rem;
        height:0.51rem;
        line-height: 0.51rem;
        text-align: center;
        font-size:0.24rem;
        color:#e81b34;
        margin:0 auto 0.14rem;
    }
    .liuyao_gc_c{
        font-size:0.26rem;color:#333333;margin-bottom:0.2rem;overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .liuyao_gc_c:nth-last-child(1){margin-bottom: 0;}
    .liuyao_gc_btn{
        width:4rem;
        height:0.8rem;
        line-height: 0.8rem;
        color:#ffffff;
        text-align: center;
        font-size:0.3rem;
        border-radius: 0.1rem;
        background-color:#e81b34;
        margin:0rem auto 0.26rem;
    }
    /* 支付弹窗 */
    .liuyao_zf_container{
        width:100%;
        height:100%;
        position: fixed;
        background-color:rgba(0,0,0,0.7);
        display: none;
        top:0;
        left: 0;
        z-index: 99;
    }
    .liuyao_zf_wrap{
        width:6.9rem;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);;
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        background-color:#ffffff;
    }
    .liuyao_zf_title{
        width:100%;
        height:0.8rem;
        line-height: 0.8rem;
        color:#ffffff;
        background:url('__PUBLIC__/images/public/title_01.png') no-repeat;
        background-size:100% 100%;
        text-align: center;
        font-size:0.32rem;
        font-family:PingFangSC-Semibold, sans-serif;
    }
    #liuyao_zf_form{
        padding:0.4rem 0.2rem;
        background: url('__PUBLIC__/images/public/liuyao_dt_bg.png') no-repeat;
        background-size:100% 100%;
    }
    .form_ul li{
        list-style: none;
        width: 100%;
        border:1px solid #E81B34;
        background-color:#fffcea;
        border-radius: 0.1rem;
        height:0.8rem;
        line-height: 0.8rem;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        font-size:0.3rem;
        margin-bottom: 0.2rem;
        overflow: hidden;
    }
    .form_ul li:nth-last-child(1){margin-bottom:0;}
    .form_ul li .f_left{margin:0 0.2rem;width:1.4rem;text-align: center;}
    .form_ul li .f_right{
        flex: 1;
        -webkit-box-flex: 1;
        -webkit-flex:1;
        -ms-flex: 1;
        background-color:#fffcea;
        outline: none;
        padding-right:0.2rem;
    }
    .form_ul li .l_date{
        flex: 1;
        -webkit-box-flex: 1;
        -webkit-flex:1;
        -ms-flex: 1;
        background-color:#fffcea;
        outline: none;
        padding-right:0.65rem;
        box-sizing: border-box;
        background-image: url('__PUBLIC__/images/public/icon_date.png');
        background-repeat:no-repeat;
        background-size:0.48rem 0.48rem;
        background-position: 98% center;
        color:#989898;
    }
    .sex_wrap{display: flex;display: -webkit-flex;display: -webkit-box;display: -ms-flexbox;}
    .sex_wrap .sex_t:first-child{margin-right:0.3rem;}
    .sex_t span{
        display:inline-block;
        width:0.28rem;
        height:0.28rem;
        border:0.03rem solid #D23037;
        border-radius: 50%;
        vertical-align: middle;
        margin-right:0.1rem;
    }
    .sex_t label{color:#898989;}
    .active_sex span{
        border-color: #D23037;
        background-color: #D23037;
        background-image: url('__PUBLIC__/images/public/icon_dagou.png');
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .active_sex label{color:#333333}
    .l_p{font-size:0.3rem;text-align: center;padding:0.4rem 0 0.3rem;;}
    .l_p span{color:#e81b34;font-weight: 400;}
    .l_confirm{
        width:3.3rem;
        height:0.8rem;
        line-height: 0.8rem;
        background-color:#E81B34;
        color:#ffffff;
        font-size:0.3rem;
        text-align: center;
        border-radius: 0.1rem;
        margin:0 auto;
    }
    .liuyao_zf_close{
        width:0.6rem;
        height:1rem;
        background:url('__PUBLIC__/images/public/close.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right:0;
        top:-0.8rem;
        z-index: -1;
    }
</style>
<!-- 六爻弹窗 -->
<if condition="($Think.cookie.channel eq qudao191) or ($Think.cookie.channel eq qudao194) or ($channel eq qudao91)">
    <else />

    <div class="liuyao_container">
        <div class="liuyao_wrap">
            <div class="liuyao_closeBtn"></div>
            <div class="liuyao_title">根据您的点击时间周易六爻起卦卦象为</div>
            <div class="liuyao_msg">
                <if condition="$arrbiangua neq ''">
                    <pre class="liuyao_zt">主变卦   <!--{$arrbengua['name']}-->  之  <!--{$arrbiangua['name']}-->  </pre>
                    <else />
                    <pre class="liuyao_zt">主变卦   <!--{$arrbengua['name']}-->  </pre>
                </if>

                <div class="liuyao_pan">
                    <ul class="liuyao_left">
                        <li>
                            <span>
                                <!--{$arrliushou[5]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[6]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua1'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua1'],5,1,'utf-8')}--></span>
                        </li>
                        <li>
                            <span>
                                <!--{$arrliushou[4]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[5]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua2'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua2'],5,1,'utf-8')}--></span>
                        </li>
                        <li>
                            <span>
                                <!--{$arrliushou[3]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[4]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua3'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua3'],5,1,'utf-8')}--></span>
                        </li>
                        <li>
                            <span>
                                <!--{$arrliushou[2]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[3]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua4'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua4'],5,1,'utf-8')}--></span>
                        </li>
                        <li>
                            <span>
                                <!--{$arrliushou[1]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[2]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua5'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua5'],5,1,'utf-8')}--></span>
                        </li>
                        <li>
                            <span>
                                <!--{$arrliushou[0]}--></span>
                            <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$benguagx[1]}-->.png"
                                    alt=""></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua6'],0,5,'utf-8')}--></span>
                            <span>
                                <!--{:mb_substr($arrbengua['sxgua6'],5,1,'utf-8')}--></span>
                        </li>
                    </ul>

                    <if condition="$arrbiangua neq ''">
                        <ul class="liuyao_right">
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[6]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua1'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua1'],5,1,'utf-8')}--></span>
                            </li>
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[5]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua2'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua2'],5,1,'utf-8')}--></span>
                            </li>
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[4]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua3'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua3'],5,1,'utf-8')}--></span>
                            </li>
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[3]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua4'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua4'],5,1,'utf-8')}--></span>
                            </li>
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[2]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua5'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua5'],5,1,'utf-8')}--></span>
                            </li>
                            <li>
                                <span></span>
                                <span class="liuyao_icon"><img src="__PUBLIC__/images/public/03_<!--{$bianguagx[1]}-->.png"
                                        alt=""></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua6'],0,5,'utf-8')}--></span>
                                <span>
                                    <!--{:mb_substr($arrbiangua['sxgua6'],5,1,'utf-8')}--></span>
                            </li>
                        </ul>
                        <else />
                    </if>
                </div>
            </div>
            <div class="liuyao_gc">
                <div class="liuyao_gc_title">卦辞——
                    <!--{$guaci[0]}-->
                </div>
                <div class="liuyao_gc_wrap">
                    <div class="liuyao_gc_t">根据卦象，你的命运和一生可概括为</div>
                    <p class="liuyao_gc_c">
                        <!--{$guaci[1]}-->
                    </p>
                    <div class="liuyao_gc_t2">卦象解释</div>
                    <p class="liuyao_gc_c">
                        <!--{$guaci[2]}-->
                    </p>
                </div>
                <div class="liuyao_gc_btn">查看更多详细解析</div>
            </div>
        </div>
    </div>

</if>
<!-- 支付成功信息弹窗 -->
<div class="liuyao_zf_container">
    <div class="liuyao_zf_wrap">
        <div class="liuyao_zf_close"></div>
        <div class="liuyao_zf_title">请补充你的八字信息</div>
        <form id="liuyao_zf_form" action="<!--{$form}-->" method="POST">
            <ul class="form_ul">
                <!-- <li>
                    <label for="l_date" class="f_left">姓名</label>
                    <input type="text" class="f_right" id="l_username" name="username" value="" placeholder="请输入姓名（可匿名）">
                </li> -->
                <li>
                    <div class="f_left">性别</div>
                    <div class='sex_wrap'>
                        <div class="sex_t active_sex" data-value="1">
                            <span></span>
                            <label for="man">男</label>
                        </div>
                        <div class="sex_t" data-value="0">
                            <span></span>
                            <label for="woman">女</label>
                        </div>
                        <input type="hidden" name="gender" value="1">
                    </div>
                </li>
                <li>
                    <label for="l_date" class="f_left">出生日期</label>
                    <div class="l_date" id="l_date" data-date="1970-01-01" data-id="l_birthday">请选择出生日期</div>
                    <input type="hidden" id="l_birthday" name="birthday" value="">
                    <input type="hidden" class="f_right" id="l_username" name="username" value="">
                </li>
            </ul>
            <p class="l_p">您选择的日期为：<span id="l_time"></span></p>
            <div class="l_confirm">确认信息</div>
        </form>
    </div>
</div>
<script>
    var hidePopup='<!--{$Think.cookie.hidePopupNum}-->';
    var Calendar4 = new lCalendar(function (data) {
        $('#l_time').html(data)
    });
    Calendar4.init('#l_date');
    var sss;
    var channel = '<!--{$Think.cookie.channel}-->';
    if (channel == 'qudao191' || channel == 'qudao194' || channel == 'qudao227' || channel == 'qudao91' || channel ==
        'qudao258'||hidePopup==1) {

    } else {
        pushHistory2();
    }
    window.addEventListener("popstate", function (e) { //首页
        console.log(e.state)
        if (e.state == 'liuyao') {
            $.getJSON("<!--{:U('Index/bzjpIndexReturn','',false)}-->", {
                csName: 'JP'
            }, function (data) { //返回点击回调入库
            });
            $('.liuyao_container').fadeIn()
            // 阻止弹窗滚动
            var scrollTop = window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop ||
                0;
            sss = scrollTop; //保存当前滚动条位置
            document.body.style.top = -1 * scrollTop + "px";
            document.body.style.position = 'fixed';
        }

    }, false);
    $('.liuyao_closeBtn').on('click', function () {
        $('.liuyao_container').fadeOut();
        document.body.style.overflow = '';
        document.body.style.position = null;
        document.body.style.top = null;
        window.scrollTo(0, sss);
        $('.close_container').fadeIn();
    })
    $('.liuyao_container').on('click', function (e) {
        if (e.currentTarget == e.target) {
            $(this).fadeOut();
            document.body.style.overflow = '';
            document.body.style.position = null;
            document.body.style.top = null;
            window.scrollTo(0, sss);
            $('.close_container').fadeIn()
        }
    })

    $('.liuyao_gc_btn').on('click', function () {
        $.getJSON("<!--{:U('Index/bzjpIndexXQ','',false)}-->", {
            csName: 'JP'
        }, function (data) { //详情点击回调入库
        });
        $('.liuyao_zf_container').fadeIn();
    })
    $('.liuyao_zf_close').on('click', function () {
        $('.liuyao_zf_container').fadeOut();
    })
    $('.liuyao_zf_container').on('click', function (e) {
        if (e.currentTarget == e.target) {
            $(this).fadeOut();
        }
    })
    // 性别切换
    $('.sex_t').on('click', function () {
        if (!$(this).hasClass('active_sex')) {
            $('.sex_t').removeClass('active_sex');
            $(this).addClass('active_sex');
            $("[name='gender']").val($(this).attr('data-value'));
        }
    });
    //表单信息
    $('.l_confirm').on('click', function () {
        $.getJSON("<!--{:U('Index/bzjpIndexTJ','',false)}-->", {
            csName: 'JP'
        }, function (data) { //提交点击回调入库
        });
        if ($("#l_username").val() == "") {
            $("#l_username").val('匿名');
        } else if ($("#l_username").val().length < 2) {
            layer.msg("姓名长度不能少于2");
            return false;
        }
        if ($("#l_birthday").val() == "") {
            layer.msg("请选择你的出生日期");
            return false
        }
        layer.load();
        setTimeout(function () {
            layer.closeAll('loading');
            layer.msg('订单提交成功', {
                icon: 1
            });
            setTimeout(function () {
                $('#liuyao_zf_form').submit();
            }, 1300);
        }, 1000);
    });

    function pushHistory2() {
        window.history.pushState('liuyao', null, document.URL);
    }
</script>